<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年08月24日 11:45
 * @Copyright:  2022-2023
!-->
<template>
  <div>
    <el-card class="tag-cloud-container" shadow="always">
      <div
        ref="cloudEl"
        class="cloud-box"
        id="wordCloud"
        style="
          width: 100%;
          min-height: 250px;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      ></div>
    </el-card>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { queryAllTag } from "@/api/blog/tag";
import * as echarts from "echarts"
import "@/utils/echarts-wordcloud.min.js"

@Component({})
export default class index2 extends Vue {

  /** 标签列表 */
  private tagList: any = [];

  private async mounted() {
    await this.queryAllTag();
    this.$nextTick(()=>{
      this.initDrawer();
    })
  }

  /** 初始化echart数据 */
  initDrawer() {
    // 获取到ref绑定为loginTimes的DOM节点，以canvas的形式展现在视图层
    const myChart = echarts.init(document.getElementById("wordCloud"));
    // echarts参数设置
    myChart.setOption({
      backgroundColor: '#fff', // canvas背景颜色
      // canvas标题配置项
      grid:{
        width:'100%'
      },
      title: {
        text: '热门标签',
        top: '3%',
        left: '-1%',
        textStyle: {
          fontSize: 20,
          color: '#3B3E41',
          fontWeight: '600'
        }
      },
      series: [
        {
          type: 'wordCloud',
          // 要绘制云的形状,默认是 circle，可选的参数有 cardioid 、 diamond 、 triangle-forward 、 triangle 、 star
          shape: 'circle',
          // 保持maskImage的纵横比或1:1的形状
          // 从echarts-word-cloud@2.1.0开始支持该选项
          keepAspect: false,
          // 左/上/宽/高/右/下用于字云的定位
          // 默认放置在中心，大小为75% x 80%。
          left: 'center',
          top: '15%',
          width: '100%',
          height: '80%',
          right: null,
          bottom: null,
          // 数据中的值将映射到的文本大小范围。
          // 默认值为最小12px，最大60px。
          sizeRange: [12, 60],
          // 文字旋转范围和步进程度。文本将通过rotationStep 45在[- 90,90]范围内随机旋转
          rotationRange: [-90, 90],
          rotationStep: 45,
          // 网格大小(以像素为单位)，用于标记画布的可用性
          // 网格大小越大，单词之间的间隔就越大
          gridSize: 8,
          // 设置为true允许文字部分地绘制在画布之外。
          // 允许画比画布大的字
          // 从echarts-word-cloud@2.1.0开始支持该选项
          drawOutOfBound: false,
          // 如果字体太大，无法显示文本，是否缩小文本。如果设置为false，则文本将不被渲染。如果设置为true，文本将被缩小。
          shrinkToFit: false,
          // 是否执行布局动画。
          //当单词较多时禁用会导致UI阻塞。
          layoutAnimation: true,       // 为false词典过度会阻塞
          // 全局文本样式
          textStyle: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            // Color可以是回调函数或颜色字符串
            color: function () {
              // 任意颜色
              return (
                'rgb(' +
                [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                ].join(',') +
                ')'
              )
            },
          },
          emphasis: {
            focus: 'self',
            textStyle: {
              textShadowBlur: 10,
              textShadowColor: '#333',
            },
          },
          // 渲染词典数据
          data: this.tagList
        }
      ]
    });
    myChart.on('click', this.handleTagClick)
  }

  /** 获取所有标签 */
  private async queryAllTag() {
    await queryAllTag().then((res: any) => {
      res.data.forEach((item: any) => {
        item.name = item.tagName
        item.url = '/blogListTag/' + item.tagId
        item.value = item.tagBlogCount
        item.label = item.tagName
        this.tagList.push(item);
      })
    })
  }

  /** tag点击事件处理 */
  private handleTagClick(item: any) {
    this.$router.push({path: '/search?activeTab=recommend&activeSearchTypeTab=blog&keyWord=&blogType=&typeName=&blogTag=' + item.name});
  }
}
</script>
<style scoped lang="scss">

</style>
